<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アイテム入れ替え</title>
<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
#sortable1,#sortable2 {
	list-style-type: none;
	margin: 0;
	padding: 0 0 2.5em;
	width: 720px;
}

#sortable1 li,#sortable2 li {
	float: left;
	margin: 0 5px 5px 5px;
	padding: 5px;
	font-size: 1.2em;
	width: 120px;
	height: 140px;
	background: url(../images/noPic.jpg) no-repeat center center;
}

.connectedSortable div { /* イメージの透過色対策 */
	background-color: white;
}

.connectedSortable div img {
	max-width: 100px;
	max-height: 100px;
}
</style>
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script>
	$(function() {
		
		// 初期は折りたたむ
		//$("#sortable2").slideToggle(0);
		
		$("#button-open").click(function(){
			// ボタンアクションでslide up/downするように
			$("#sortable2").slideToggle();
			
			if($(this).hasClass("open")){
				$(this).removeClass("open").addClass("close").text("open");
			} else {
				$(this).removeClass("close").addClass("open").text("close");
			}
		});
		
		var sortable1 = $("#sortable1, #sortable2").sortable({
			connectWith : 'ul.connectedSortable',
			placeholder : 'ui-state-highlight',
			revert : 300, // 要素の吸着にアニメーション（時間）をかける
			opacity:0.7,
		}).disableSelection();
	});
</script>
</head>
<body>
	<h2>イメージ入れ替え（list）</h2>
	<p>D&amp;Dで要素が移動できる。枠固定版</p>
	<button id="button-open">open</button>
	<ul id="sortable1" class="connectedSortable">
		<li class="ui-state-default">
			<div class="image-set">
				<img id="pic001" src="../images/ikd.jpg" /><br />ikd.jpg<br />
			</div>
		</li>
		<li class="ui-state-default"><div class="image-set">
				<img id="pic002" src="../images/kuma.gif" /><br />kuma.gif
			</div>
		</li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
	</ul>
	<ul id="sortable2" class="connectedSortable">
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default">
			<div class="image-set">
				<img id="pic002" src="../images/kuma.gif" /><br />kuma.gif
			</div>
		</li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
		<li class="ui-state-default"></li>
	</ul>
	<div style="clear: both"></div>
</body>
</html>